<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <div class="teamTitle" style="font-weight: bold;font-size: 16px">基础检查项目</div>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    <br />    <br />

    <div :style="{ borderBottom: '1px solid #E9E9E9'}">
      <div class="teamTitle" style="font-weight: bold;font-size: 16px">心脑血管疾病</div>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    <br />    <br />

    <div :style="{ borderBottom: '1px solid #E9E9E9'}">
      <div class="teamTitle" style="font-weight: bold;font-size: 16px">肿瘤早筛查</div>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    <br />    <br />

    <div :style="{ borderBottom: '1px solid #E9E9E9'}">
      <div class="teamTitle" style="font-weight: bold;font-size: 16px">免疫与功能</div>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    <br />    <br />

    <div :style="{ borderBottom: '1px solid #E9E9E9'}">
      <div class="teamTitle" style="font-weight: bold;font-size: 16px">未来预测</div>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>

</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
export default {
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
  },
};
</script>
